<template>
  <div class="kindeditor">
    <textarea :id="id" v-model="outContent" name="content" />
    <input id="inputFile" style="visibility: hidden;height:0;position: absolute;" type="file" name @change="selectedFile">
  </div>
</template>

<script>
import '../../../../../node_modules/kindeditor/kindeditor-all.js';
import '../../../../../node_modules/kindeditor/lang/zh-CN.js';
import '../../../../../node_modules/kindeditor/themes/default/default.css';

export default {
  name: 'Kindeditor',
  props: {
    content: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      required: true,
    },
    width: {
      type: String,
      default: '',
    },
    height: {
      type: String,
      default: '',
    },
    minWidth: {
      type: Number,
      default: 650,
    },
    minHeight: {
      type: Number,
      default: 100,
    },
    items: {
      type: Array,
      default() {
        return [
          // "source",
          // "|",
          'undo',
          'redo',
          '|',
          'preview',
          'print',
          // 'template',
          // 'code',
          'cut',
          'copy',
          'paste',
          'plainpaste',
          'wordpaste',
          '|',
          'justifyleft',
          'justifycenter',
          'justifyright',
          'justifyfull',
          'insertorderedlist',
          'insertunorderedlist',
          'indent',
          'outdent',
          'subscript',
          'superscript',
          'clearhtml',
          'quickformat',
          // "selectall",
          '|',
          'fullscreen',
          '/',
          'formatblock',
          // "fontname",
          'fontsize',
          '|',
          'forecolor',
          'hilitecolor',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'lineheight',
          'removeformat',
          '|',
          'image',
          // "multiimage",
          // "flash",
          'media',
          // "insertfile",
          'table',
          'hr',
          // "emoticons",
          // "baidumap",
          'pagebreak',
          'anchor',
          'link',
          'unlink',
          '|',
          'about',
        ];
      },
    },
    noDisableItems: {
      type: Array,
      default() {
        return ['source', 'fullscreen'];
      },
    },
    filterMode: {
      type: Boolean,
      default: true,
    },
    htmlTags: {
      type: Object,
      default() {
        return {
          font: ['color', 'size', 'face', '.background-color'],
          span: ['style'],
          div: ['class', 'align', 'style'],
          table: ['class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'style'],
          'td,th': ['class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor', 'style'],
          a: ['class', 'href', 'target', 'name', 'style'],
          embed: ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', 'style', 'align', 'allowscriptaccess', '/'],
          img: ['src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style', '/'],
          hr: ['class', '/'],
          br: ['/'],
          video: ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess', 'controls', 'style', '/'],
          'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6': ['align', 'style'],
          'tbody,tr,strong,b,sub,sup,em,i,u,strike': [],
        };
      },
    },
    wellFormatMode: {
      type: Boolean,
      default: true,
    },
    resizeType: {
      type: Number,
      default: 2,
    },
    themeType: {
      type: String,
      default: 'default',
    },
    langType: {
      type: String,
      default: 'zh-CN',
    },
    designMode: {
      type: Boolean,
      default: true,
    },
    fullscreenMode: {
      type: Boolean,
      default: false,
    },
    basePath: {
      type: String,
      default: '',
    },
    themesPath: {
      type: String,
      default: '',
    },
    pluginsPath: {
      type: String,
      default: '',
    },
    langPath: {
      type: String,
      default: '',
    },
    minChangeSize: {
      type: Number,
      default: 5,
    },
    loadStyleMode: {
      type: Boolean,
      default: true,
    },
    urlType: {
      type: String,
      default: '',
    },
    newlineTag: {
      type: String,
      default: 'p',
    },
    pasteType: {
      type: Number,
      default: 2,
    },
    dialogAlignType: {
      type: String,
      default: 'page',
    },
    shadowMode: {
      type: Boolean,
      default: true,
    },
    zIndex: {
      type: Number,
      default: 811213,
    },
    useContextmenu: {
      type: Boolean,
      default: true,
    },
    syncType: {
      type: String,
      default: 'form',
    },
    indentChar: {
      type: String,
      default: '\t',
    },
    cssPath: {
      type: [String, Array],
      default: '',
    },
    cssData: {
      type: String,
      default: '',
    },
    bodyClass: {
      type: String,
      default: 'ke-content',
    },
    colorTable: {
      type: Array,
      default() {
        return [];
      },
    },
    afterCreate: {
      type: Function,
      default: () => { },
    },
    afterChange: {
      type: Function,
      default: () => { },
    },
    afterTab: {
      type: Function,
      default: () => { },
    },
    afterFocus: {
      type: Function,
      default: () => { },
    },
    afterBlur: {
      type: Function,
      default: () => { },
    },
    afterUpload: {
      type: Function,
      default: () => { },
    },
    uploadJson: {
      type: String,
      url: '',
      default: () => { },
    },
    fileManagerJson: {
      type: Function,
      default: () => { },
    },
    allowPreviewEmoticons: {
      type: Boolean,
      default: true,
    },
    allowImageUpload: {
      type: Boolean,
      default: true,
    },
    allowFlashUpload: {
      type: Boolean,
      default: true,
    },
    allowMediaUpload: {
      type: Boolean,
      default: true,
    },
    allowFileUpload: {
      type: Boolean,
      default: true,
    },
    allowFileManager: {
      type: Boolean,
      default: false,
    },
    fontSizeTable: {
      type: Array,
      default() {
        return ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px'];
      },
    },
    imageTabIndex: {
      type: Number,
      default: 0,
    },
    formatUploadUrl: {
      type: Boolean,
      default: true,
    },
    fullscreenShortcut: {
      type: Boolean,
      default: false,
    },
    extraFileUploadParams: {
      type: Array,
      default() {
        return [];
      },
    },
    filePostName: {
      type: String,
      default: 'imgFile',
    },
    fillDescAfterUploadImage: {
      type: Boolean,
      default: false,
    },
    afterSelectFile: {
      type: Function,
      default: () => { },
    },
    pagebreakHtml: {
      type: String,
      default: '<hr style=”page-break-after: always;” class=”ke-pagebreak” />',
    },
    allowImageRemote: {
      type: Boolean,
      default: true,
    },
    autoHeightMode: {
      type: Boolean,
      default: false,
    },
    fixToolBar: {
      type: Boolean,
      default: false,
    },
    tabIndex: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      editor: null,
      outContent: this.content,
      fileType: '', // 上传文件类型
    };
  },
  watch: {
    content(val) {
      this.editor && val !== this.outContent && this.editor.html(val);
    },
    outContent(val) {
      this.$emit('update:content', val);
      this.$emit('on-content-change', val);
    },
  },
  mounted() {
    var _this = this;
    _this.editor = window.KindEditor.create('#' + this.id, {
      width: _this.width,
      height: _this.height,
      minWidth: _this.minWidth,
      minHeight: _this.minHeight,
      items: _this.items,
      noDisableItems: _this.noDisableItems,
      filterMode: _this.filterMode,
      htmlTags: _this.htmlTags,
      wellFormatMode: _this.wellFormatMode,
      resizeType: _this.resizeType,
      themeType: _this.themeType,
      langType: _this.langType,
      designMode: _this.designMode,
      fullscreenMode: _this.fullscreenMode,
      basePath: _this.basePath,
      themesPath: _this.cssPath,
      pluginsPath: _this.pluginsPath,
      langPath: _this.langPath,
      minChangeSize: _this.minChangeSize,
      loadStyleMode: _this.loadStyleMode,
      urlType: _this.urlType,
      newlineTag: _this.newlineTag,
      pasteType: _this.pasteType,
      dialogAlignType: _this.dialogAlignType,
      shadowMode: _this.shadowMode,
      zIndex: _this.zIndex,
      useContextmenu: _this.useContextmenu,
      syncType: _this.syncType,
      indentChar: _this.indentChar,
      cssPath: _this.cssPath,
      cssData: _this.cssData,
      bodyClass: _this.bodyClass,
      colorTable: _this.colorTable,
      afterCreate: _this.afterCreate,
      afterChange() {
        _this.afterChange;
        _this.outContent = this.html();
      },
      afterTab: _this.afterTab,
      afterFocus: _this.afterFocus,
      afterBlur: _this.afterBlur,
      afterUpload: _this.afterUpload,
      uploadJson: _this.uploadJson,
      fileManagerJson: _this.fileManagerJson,
      allowPreviewEmoticons: _this.allowPreviewEmoticons,
      allowImageUpload: _this.allowImageUpload,
      allowFlashUpload: _this.allowFlashUpload,
      allowMediaUpload: _this.allowMediaUpload,
      allowFileUpload: _this.allowFileUpload,
      allowFileManager: _this.allowFileManager,
      fontSizeTable: _this.fontSizeTable,
      imageTabIndex: _this.imageTabIndex,
      formatUploadUrl: _this.formatUploadUrl,
      fullscreenShortcut: _this.fullscreenShortcut,
      extraFileUploadParams: _this.extraFileUploadParams,
      filePostName: _this.filePostName,
      fillDescAfterUploadImage: _this.fillDescAfterUploadImage,
      afterSelectFile: _this.afterSelectFile,
      pagebreakHtml: _this.pagebreakHtml,
      allowImageRemote: _this.allowImageRemote,
      autoHeightMode: _this.autoHeightMode,
      fixToolBar: _this.fixToolBar,
      tabIndex: _this.tabIndex,
    });
    // 撤销功能
    this.editor.clickToolbar('undo', () => {
      console.log(this.outContent);
    });
    // 添加点击图片回调函数
    this.editor.clickToolbar('image', () => {
      // 禁用自带的图片弹窗
      this.editor.hideDialog();
      this.fileType = 'image';
      // 打开文件
      this.handleOpenFile();
    });
    this.editor.clickToolbar('media', () => {
      // 禁用自带的视频弹窗
      this.editor.hideDialog();
      this.fileType = 'media';
      // 打开文件
      this.handleOpenFile();
    });
  },
  methods: {
    // 打开文件
    handleOpenFile() {
      const input = document.getElementById('inputFile');
      // 解决同一个文件不能监听的问题
      input.addEventListener(
        'click',
        () => {
          this.value = '';
        },
        false
      );
      // 点击input
      input.click();
    },
    // 选择好文件
    async selectedFile($event) {
      var _thiz = this;
      const file = $event.target.files[0];
      console.log(file);
      // 把图片上传到后端服务器 拿到url  uploadImage 是自己后端上传图片的接口
      // 调用appendHtml方法把图片追加到富文本
      const param = new FormData();
      // param.append('name', 'wiiiiiinney')
      // 通过append向form对象添加数据
      param.append('imgFile', file);
      const config = {
        // 添加请求头
        headers: { 'Content-Type': 'multipart/form-data' },
        // 添加上传进度监听事件
        onUploadProgress: (e) => {
          var completeProgress = (((e.loaded / e.total) * 100) | 0) + '%';
          this.progress = completeProgress;
        },
      };
      this.$http
        .post(`http://172.17.135.169:8089/rescue-map/common/oss/simple_upload?dir=${this.fileType}`, param, config)
        .then((response) => {
          console.log(file.type.split('/')[0]);
          if (file.type.split('/')[0] === 'image') {
            _thiz.editor.insertHtml(`<img style="max-width:260px;" src="${response.data.url}"/>`);
          } else {
            _thiz.editor.insertHtml(`<span>&nbsp<video controls style="width:300px;" src='${response.data.url}'></video>&nbsp</span>`);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style>
/* .ke-dialog-default.ke-dialog {
  width: 340px !important;
  height: 550px !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.ke-dialog-body .ke-textarea {
  width: 300px !important;
  height: 500px !important;
} */
/* body {
  overflow-wrap: break-word !important;
} */
</style>
